<template>
  <div class="article-comments">
    <el-card>
      <div class="article-comments-operator">
        <el-tabs v-model="activeName" @tab-click="handleClick" style="width: 750px;">
          <el-tab-pane label="全部评论" name="1">
            <div style="margin: 0" v-for="(item, index) in this.comments" :key="item.id">
              <el-row :gutter="0">
                <el-col :span="4">
                  <div style='text-align: center'>
                    <!--头像-->
                    <el-avatar :size="60" :src="item.user.headimg"></el-avatar>
                  </div>
                </el-col>
                <el-col :span="20">
                  <div style="display: flex">
                    <div>
                      <!--用户名-->
                      <span style="font-size: 14px;font-weight: 600;color: #999999">{{ item.user.nick }}</span>
                      <br />
                      <!--层-->
                      <span style="font-size: 12px;font-weight: 600;color: #999999">{{ index + 1 }}楼</span>
                    </div>
                    <div>
                      <el-tag size="mini">LV.{{ item.user.lv.lv }}</el-tag>
                    </div>
                  </div>
                  <div class="comment-content" v-html="item.tb_article_comment.content"></div>
                  <div class="article-comments-replay-operator">
                    <!--时间-->
                    <div v-text="$date.diffTime(item.tb_article_comment.creat_time)"></div>
                    <!--点赞-->
                    <div>
                      <span>回复</span>
                      <el-divider direction="vertical"></el-divider>
                      <font-awesome-icon :icon="['far', 'thumbs-up']" @click="like(item.id)"></font-awesome-icon>
                      <span>{{ item.fabulous_count }}</span>
                    </div>
                  </div>
                  <!-- 回复 -->
                  <div class="replay" v-for='item2 in item.ap_comment_replay_vos' :key='item2.id'>
                    <div style="display: flex;padding-left: 10px">
                      <div>
                        <!--头像-->
                        <el-avatar :size="25" :src="item2.tb_article_comment_replay.user.headimg"></el-avatar>
                      </div>
                      <div>
                        <!--用户名-->
                        <span style="font-size: 10px;font-weight: 600;color: #999999">{{ item2.tb_article_comment_replay.user.nick }}</span>
                      </div>
                    </div>
                    <div class="comment-content" v-html="item2.tb_article_comment_replay.content" style="padding:12px 30px"></div>
                    <div class="article-comments-replay-operator" style="padding:0 0 10px 30px">
                      <div v-text="$date.diffTime(item2.tb_article_comment_replay.creat_time)"></div>
                      <div style="">
                        <span>回复</span>
                        <el-divider direction="vertical"></el-divider>
                        <font-awesome-icon :icon="['far', 'thumbs-up']" @click="like(item2.tb_article_comment_replay.id)"></font-awesome-icon>
                        <span>{{ item2.count }}</span>
                      </div>
                    </div>
                    <el-button class="commt_btm " type="text" @click="addDialogVisible = true">查看更多回复></el-button>
                  </div>
                </el-col>
              </el-row>
              <el-divider></el-divider>
            </div>
          </el-tab-pane>
          <el-tab-pane label="只看主楼" name="2">配置管理</el-tab-pane>
        </el-tabs>
        <el-dropdown @command="handleCommand">
          <div class="article-comments-operator-menu">
            <span class="el-dropdown-link"> 排序：<i class="el-icon-arrow-down el-icon--right"></i> </span>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-plus">热门</el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-plus">最早</el-dropdown-item>
            <el-dropdown-item icon="el-icon-circle-plus-outline">最新</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-card>
    <!-- 查看更多回复弹窗 -->
    <el-dialog title="查看评论" :visible.sync="addDialogVisible" width="50%">
      <!--内容主题区-->
      <div style="margin: 0" v-for="(item, index) in this.comments" :key="item.id">
        <div style="display: flex">
          <div>
            <!--头像-->
            <el-avatar :size="50" :src="item.user.headimg"></el-avatar>
          </div>
          <div>
            <!--用户名-->
            <span style="font-size: 14px;font-weight: 600;color: #999999">{{ item.user.nick }}</span>
            <br />
            <!--层-->
            <span style="font-size: 12px;font-weight: 600;color: #999999">{{ index + 1 }}楼</span>
          </div>
          <div>
            <el-tag size="mini">LV.{{ item.user.lv.lv }}</el-tag>
          </div>
        </div>
        <div style="margin-left: 50px">
          <div class="comment-content" v-html="item.tb_article_commen.content"></div>
          <div class="article-comments-replay-operator">
            <div v-text="$date.diffTime(item.tb_article_commen.creat_time)"></div>
            <div>
              <el-button type="primary" @click="a">回复</el-button>
              <el-divider direction="vertical"></el-divider>
              <font-awesome-icon :icon="['far', 'thumbs-up']" @click="like(item.id)"></font-awesome-icon>
              <span>{{ item.fabulous_count }}</span>
            </div>
            <tinymceCommentReplayEditor v-show="tinymceCommentReplayEditorVisable"></tinymceCommentReplayEditor>
          </div>
        </div>

        <el-divider></el-divider>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { GetUrlParam } from '../../utils/getUrlParams'
export default {
  data () {
    return {
      activeName: '1',
      tinymceCommentReplayEditorVisable: false,
      comments: [],
      // 控制更多回复弹窗显示与隐藏
      addDialogVisible: false
    }
  },
  created () {
    this.getArticleComment()
    // this.getArticleCommentReplay()
  },
  // DOM对象加载完成时
  mounted () {},
  methods: {
    a () {
      console.log(1)
      return !this.tinymceCommentReplayEditorVisable
    },
    // handleClick () {},
    handleCommand (command) {
      this.$message('click on item ' + command)
    },
    // 获取当前文章的评论 || 兄弟组件中的按钮事件
    async getArticleComment () {
      // console.log('获取当前文章评论')
      const url = this.$config.urls.get('load_article_comment')
      const { data: res } = await this.$http.get(url, { params: { articleId: GetUrlParam('articleid'), author_id: '' } })
      console.log(res)
      if (res.code === 0) {
        this.comments = res.data
        // console.log(this.comments)
      } else {
        this.$message.error('加载评论失败！请稍后再试！')
      }
    },
    //
    async getArticleCommentReplay () {
      // console.log('获取当前文章评论回复')
      const url = this.$config.urls.get('load_comment_replay')
      const { data: res } = await this.$http.get(url, { params: { articleId: GetUrlParam('articleid'), commentId: 'A87E76E7B9A393ECCA39C3EDB6A89A03', commentReplayId: '8D3E8E0CF883C4E99329AF8A29300AB6', pageSize: 5 } })
      console.log(res)
      if (res.code === 0) {
        console.log(res.data)
        // this.comments = res.data
      } else {
        this.$message.error('加载评论失败！请稍后再试！')
      }
    },
    // 点赞、取消赞
    like: function (commentId) {
      var data = {}
      // 去articleActionList找到对应的articleId,找到后将文章id，是否点赞
      this.comments.forEach(item => {
        if (item.id === commentId) {
          data.commentId = item.id
          data.operation = item.isLike ? 1 : 0
        }
      })
      const url = this.$config.urls.get('like_behavior')
      this.$memory
        .getEquipmentId()
        .then(equipmentId => {
          return new Promise((resolve, reject) => {
            this.$http
              .post(url, {
                equipment_id: equipmentId,
                comment_id: data.commentId,
                type: 0,
                operation: data.operation
              })
              .then(d => {
                resolve(d)
              })
              .catch(e => {
                reject(e)
              })
          })
        })
        .catch(e => {
          return new Promise((resolve, reject) => {
            reject(e)
          })
        })
        .then(d => {
          if (d.data.code === 0) {
            if (data.operation === 1) {
              this.subArticleActionListFabulousCount(data.commentId)
            } else {
              this.addArticleActionListFabulousCount(data.commentId)
            }
            this.reverseArticleActionListConfigFabulousCount(data.commentId)
          } else {
            console.log(d)
            this.$message.error(d.data.error_message)
          }
        })
        .catch(e => {
          console.log(e)
        })
    },
    // 查看更多弹窗
    handleClick () {}
  },
  computed: {},
  name: 'articleComments',
  components: {}
}
</script>

<style lang="less" scoped>
.article-comments {
  margin-top: 20px;
}

.article-comments-operator {
  display: flex;
  justify-content: space-between;
}
.article-comments-operator-menu {
  position: relative;
  top: 10px;
}
.article-comments-replay-operator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #999999;
  font-size: 13px;
}
.replay {
  height: auto;
  background-color: rgb(247, 248, 252);
  margin: 0 auto;
  border-radius: 10px;
  font-size: 13px;
  box-sizing: border-box;
  padding: 10px 10px;
}
.commt_btm {
  display: inline-block;
  width: 100%;
  height: auto;
  text-align: center;
  color: #999999 !important;
}
</style>
